<template>
	<view class="concat">
		<view class="woman woman-bg" @click="callPreSales">
			<view class="woman-prev">售前服务</view>
			<view class="woman-desc">
				解答关于产品、服务、价格、购买流程等方面的疑问。
			</view>
			<view class="woman-time">
				工作日08:30—17:30
				<view class="woam-icon" @click="callPreSales">
					<u-icon class="icon" name="phone-fill" color="#ff6005" size="20"></u-icon>
				</view>
			</view>
			<view class="woman-img" @click="callPreSales">
				<image style="height: 100%;" mode="heightFix" :src="localIconSrc('woman.png')"></image>
			</view>
		</view>
		<view class="woman man-bg" @click="callCustomer">
			<button :open-type="openType"></button>
			<view class="woman-prev">售后服务</view>
			<view class="woman-desc man">
				在线客服咨询，提供解决方案
			</view>
			<view class="woman-time">
				工作日09:00—21:00
				<view class="woam-icon" @click.stop="callAfterSales">
					<u-icon class="icon" name="phone-fill" color="#ff6005" size="18"></u-icon>
				</view>
				
			</view>
			<view class="woman-img">
				<image style="height: 100%;" mode="heightFix" :src="localIconSrc('man.png')"></image>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				openType: ''
			}
		},
		onShow() {
			if(uni.getStorageSync('apiticket')){
				this.openType = 'contact'
			} else {
				this.openType = ''
			}
		},
		methods: {
			callPreSales() {
				uni.makePhoneCall({
					phoneNumber: '0851-85758817'
				})
			},
			callAfterSales() {
				uni.makePhoneCall({
					phoneNumber: '4006 309 568'
				})
			},
			callCustomer() {
				if(!uni.getStorageSync('apiticket')){
					uni.showModal({
						title: "提示",
						content: "请先登录",
						success(res) {
							if(res.confirm){
								setTimeout(() => {
									uni.navigateTo({
										url: "/pages/login/index",
									})
								}, 1000);
							}
						},
					});
				} else {
					this.openType = 'contact'
				}
			}
		}
	}
</script>

<style scoped lang="scss">
.concat {
	margin: 60rpx 40rpx;
	
	.woman{
		border-radius: 16rpx;
		padding: 40rpx;
		position: relative;
		margin-bottom: 80rpx;
		
		button {
			width: 100%;
			height: 100%;
			position: absolute;
			top: 0;
			left: 0;
			z-index: 5;
			opacity: 0;
		}
		
		.woman-prev {
			font-size: 32rpx;
			color: #333;
			margin-bottom: 26rpx;
		}
		.woman-desc{
			font-size: 28rpx;
			color: #666;
			margin-bottom: 52rpx;
			width: 380rpx;
		}
		.man {
			width: 270rpx;
		}
		.woman-time{
			display: flex;
			align-items: center;
			font-size: 24rpx;
			color: #999;
			
			.woam-icon {
				margin-left: 12rpx;
				width: 48rpx;
				height: 48rpx;
				border: 1px solid #ff6005;
				display: flex;
				justify-content: center;
				align-items: center;
				border-radius: 50%;
				z-index: 10;
			}
		}
		.woman-img {
			// width: 320rpx;
			height: 370rpx;
			position: absolute;
			right: 10rpx;
			bottom: 0;
		}
		
	}
	
	.woman-bg {
		background: linear-gradient(to top right, #f5effd, #e9c6fb, #fce2d6);
	}
	.man-bg {
		background: linear-gradient(to top right, #ffcdcd, #b7c9ff);
	}
}
</style>
